<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
      步骤：
        1. 创建一个 svg 元素，将其字符串设置为它的 innerHTML
        2. 将 svg 元素添加到 dom 中
        3. 创建一个 canvas 元素，将其大小设置与 svg 元素一样
        4. 使用 canvas 的 drawImage 方法，将 svg 元素绘制到 canvas 上
        5. 将 canvas 的内容导出为图片格式，比如 png
        6. 创建一个下载链接，让用户下载
      */

      function svgStringToImageDownload(svgStr, fileName = "download-image") {
        // 创建 canvas 元素
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        // 设置 canvas 大小
        const svgWidth = parseInt(svgStr.match(/width="(\d+)"/)[1]);
        const svgHeight = parseInt(svgStr.match(/height="(\d+)"/)[1]);
        canvas.width = svgWidth;
        canvas.height = svgHeight;

        // 使用 canvas 将 svg 字符串绘制到 canvas（或者使用三方库）
        const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svgElement.innerHTML = svgStr;
        const container = document.createElement("div");
        container.style.position = "absolute";
        container.style.visibility = "hidden";
        container.appendChild(svgElement);
        document.body.appendChild(container);

        const svgDataUrl = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgStr)));
        const img = new Image();
        img.src = svgDataUrl;
        img.onload = function () {
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          // 现在 canvas 上已经绘制了 svg 内容
          // 导出图片
          const imgDataUrl = canvas.toDataURL("image/png");
          // 创建下载链接
          const link = document.createElement("a");
          link.download = `${fileName}.png`;
          link.href = imgDataUrl;
          // 触发下载
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        };
      }

      // test
      const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"><circle cx="100" cy="50" r="40" stroke="black"  stroke-width="2" fill="red" /></svg>`;
      svgStringToImageDownload(svgStr, "my-svg");
    </script>
  </body>
</html>
